<template>
  <el-row>
    <el-col :span="12">
      <el-card style="width: 800px;">
        <div id="selectByGroupByCategory" style="width: 600px;height: 450px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div id="allCnameAndCountDiv" style="width: 600px; height: 450px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import * as echarts from "echarts";
import {onMounted} from "vue";
import goodsApi from "@/api/goodsApi.js";


//定义函数显示图表
function chart01() {
  goodsApi.selectByGroupByCategory().then(resp => {
    let data = new Array();
    let count = new Array();

    for (let index = 0; index < resp.data.length; index++) {
      data.push(resp.data[index].name);
      count.push(resp.data[index].count);
    }
    var myChart = echarts.init(document.getElementById('selectByGroupByCategory'));
    var option = {
      title: {
        text: '数量前五的分类和数量',
        textStyle: {
          color: '#000000',
          fontweight: 'lighter'
        }
      },
      legend: {
        data: [`数量`],
        right: '10%',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: '#000000',
        }
      },
      xAxis: {
        data: data,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000000',
            width: 1
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000000',
            width: 1
          }
        }, splitLine: {
          show: false
        }
      },
      series: [{
        name: '数量',
        type: 'bar',
        data: count,
        barWidth: '50%',
      }]
    };
    myChart.setOption(option);
  });

}

//饼图
function chart02() {
  goodsApi.all()
      .then(resp => {
        console.log(resp);
        let data = new Array();
        let count = new Array();
        for (let index = 0; index < resp.data.length; index++) {
          data.push(resp.data[index].name);
          count.push(resp.data[index].count);
        }
        var myChart = echarts.init(document.getElementById('allCnameAndCountDiv'));
        // 指定图表的配置项和数据
        var option = {
          legend: {
            data: data,
            right: '10%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#000000'
            }
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: data.map((name, index) => ({
                value: count[index],
                name: name
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
}

onMounted(() => {
  chart01();
  chart02();
});

</script>

<style scoped>

</style>